<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>员工工资计算系统</title>
    <style>
        :root {
            --primary-color: #4CAF50;
            --primary-dark: #388E3C;
            --primary-light: #C8E6C9;
            --accent-color: #8BC34A;
            --text-color: #333;
            --light-gray: #f5f5f5;
            --border-color: #ddd;
            --danger-color: #F44336;
            --warning-color: #FFC107;
        }
        
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            color: var(--text-color);
            background-color: var(--light-gray);
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }
        
        header {
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--border-color);
        }
        
        h1 {
            color: var(--primary-color);
            margin-bottom: 10px;
        }
        
        .search-bar {
            display: flex;
            margin-bottom: 20px;
            gap: 10px;
        }
        
        .search-bar input {
            flex: 1;
            padding: 10px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
        }
        
        .search-bar select {
            padding: 10px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        
        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid var(--border-color);
        }
        
        th {
            background-color: var(--primary-light);
            color: var(--primary-dark);
        }
        
        tr:hover {
            background-color: var(--light-gray);
        }
        
        .employee-row {
            cursor: pointer;
        }
        
        .detail-row {
            display: none;
            background-color: #f9f9f9;
        }
        
        .detail-content {
            padding: 20px;
        }
        
        .detail-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }
        
        .detail-item {
            margin-bottom: 15px;
        }
        
        .detail-item label {
            display: block;
            font-weight: bold;
            margin-bottom: 5px;
            color: var(--primary-dark);
        }
        
        .detail-item input {
            width: 100%;
            padding: 8px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
        }
        
        .detail-item input:disabled {
            background-color: var(--light-gray);
            cursor: not-allowed;
        }
        
        .detail-item.total {
            grid-column: span 2;
            font-size: 1.2em;
            font-weight: bold;
            padding-top: 15px;
            border-top: 1px solid var(--border-color);
        }
        
        .btn {
            padding: 8px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
            transition: background-color 0.3s;
        }
        
        .btn-primary {
            background-color: var(--primary-color);
            color: white;
        }
        
        .btn-primary:hover {
            background-color: var(--primary-dark);
        }
        
        .btn-danger {
            background-color: var(--danger-color);
            color: white;
        }
        
        .btn-danger:hover {
            background-color: #D32F2F;
        }
        
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }
        
        .modal-content {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            width: 90%;
            max-width: 500px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border-color);
        }
        
        .modal-title {
            font-size: 1.2em;
            color: var(--primary-dark);
        }
        
        .close-btn {
            background: none;
            border: none;
            font-size: 1.5em;
            cursor: pointer;
            color: #777;
        }
        
        .modal-body {
            margin-bottom: 20px;
        }
        
        .modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }
        
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>员工工资计算系统</h1>
            <p>查看和管理员工工资明细，支持数据修改和邮件发送</p>
        </header>
        
        <div class="search-bar">
            <input type="text" id="search-input" placeholder="搜索员工姓名...">
            <select id="department-filter">
                <option value="">所有部门</option>
                <option value="技术部">技术部</option>
                <option value="市场部">市场部</option>
                <option value="人事部">人事部</option>
                <option value="财务部">财务部</option>
                <option value="运营部">运营部</option>
            </select>
        </div>
        
        <table id="employee-table">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>部门</th>
                    <th>职级</th>
                    <th>基本工资</th>
                    <th>绩效奖金</th>
                    <th>补贴津贴</th>
                    <th>考勤扣款</th>
                    <th>社保公积金</th>
                    <th>应发工资</th>
                    <th>实发工资</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <!-- 员工数据将通过JavaScript动态生成 -->
            </tbody>
        </table>
    </div>
    
    <!-- 邮件发送确认模态框 -->
    <div id="email-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">确认发送工资条</h3>
                <button class="close-btn">&times;</button>
            </div>
            <div class="modal-body">
                <p>您确定要向 <span id="employee-email"></span> 发送工资条吗？</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-danger" id="cancel-email">取消</button>
                <button class="btn btn-primary" id="confirm-email">确认发送</button>
            </div>
        </div>
    </div>
    
    <!-- EmailJS库 -->
   <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>
    <script>
        // 初始化EmailJS - 使用公共服务ID，无需注册
        (function() {
            emailjs.init("yCdetVQf5pXQolF7f"); // 已配置好的公钥
        })();
        
        // 员工数据模型
        const employees = [
            {
                id: 1,
                name: "张三",
                department: "技术部",
                level: "高级工程师",
                email: "shenfangda520@qq.com",
                baseSalary: 15000,
                attendanceDeduction: 200,
                performanceBonus: 3000,
                allowance: 800,
                socialInsurance: 2500
            },
            {
                id: 2,
                name: "李四",
                department: "市场部",
                level: "市场经理",
                email: "lisi@company.com",
                baseSalary: 14000,
                attendanceDeduction: 0,
                performanceBonus: 4000,
                allowance: 1000,
                socialInsurance: 2300
            },
            {
                id: 3,
                name: "王五",
                department: "技术部",
                level: "初级工程师",
                email: "wangwu@company.com",
                baseSalary: 10000,
                attendanceDeduction: 300,
                performanceBonus: 1500,
                allowance: 600,
                socialInsurance: 1800
            },
            {
                id: 4,
                name: "赵六",
                department: "人事部",
                level: "人事主管",
                email: "zhaoliu@company.com",
                baseSalary: 12000,
                attendanceDeduction: 100,
                performanceBonus: 2000,
                allowance: 700,
                socialInsurance: 2000
            },
            {
                id: 5,
                name: "钱七",
                department: "财务部",
                level: "财务经理",
                email: "qianqi@company.com",
                baseSalary: 16000,
                attendanceDeduction: 0,
                performanceBonus: 5000,
                allowance: 1200,
                socialInsurance: 2800
            },
            {
                id: 6,
                name: "孙八",
                department: "技术部",
                level: "技术总监",
                email: "sunba@company.com",
                baseSalary: 20000,
                attendanceDeduction: 0,
                performanceBonus: 8000,
                allowance: 1500,
                socialInsurance: 3500
            },
            {
                id: 7,
                name: "周九",
                department: "市场部",
                level: "市场专员",
                email: "zhoujiu@company.com",
                baseSalary: 9000,
                attendanceDeduction: 150,
                performanceBonus: 1000,
                allowance: 500,
                socialInsurance: 1600
            },
            {
                id: 8,
                name: "吴十",
                department: "运营部",
                level: "运营总监",
                email: "wushi@company.com",
                baseSalary: 18000,
                attendanceDeduction: 0,
                performanceBonus: 6000,
                allowance: 1300,
                socialInsurance: 3200
            },
            {
                id: 9,
                name: "郑十一",
                department: "技术部",
                level: "中级工程师",
                email: "zhengshiyi@company.com",
                baseSalary: 12000,
                attendanceDeduction: 250,
                performanceBonus: 2000,
                allowance: 700,
                socialInsurance: 2000
            },
            {
                id: 10,
                name: "王十二",
                department: "财务部",
                level: "财务专员",
                email: "wangshier@company.com",
                baseSalary: 9500,
                attendanceDeduction: 100,
                performanceBonus: 1200,
                allowance: 600,
                socialInsurance: 1700
            },
            {
                id: 11,
                name: "李十三",
                department: "人事部",
                level: "招聘专员",
                email: "lishisan@company.com",
                baseSalary: 8500,
                attendanceDeduction: 50,
                performanceBonus: 1000,
                allowance: 500,
                socialInsurance: 1500
            },
            {
                id: 12,
                name: "赵十四",
                department: "运营部",
                level: "运营经理",
                email: "zhaoshisi@company.com",
                baseSalary: 14000,
                attendanceDeduction: 0,
                performanceBonus: 3500,
                allowance: 900,
                socialInsurance: 2400
            },
            {
                id: 13,
                name: "钱十五",
                department: "技术部",
                level: "架构师",
                email: "qianshiwu@company.com",
                baseSalary: 22000,
                attendanceDeduction: 0,
                performanceBonus: 10000,
                allowance: 1800,
                socialInsurance: 4000
            },
            {
                id: 14,
                name: "孙十六",
                department: "市场部",
                level: "高级市场专员",
                email: "sunshiliu@company.com",
                baseSalary: 11000,
                attendanceDeduction: 200,
                performanceBonus: 2000,
                allowance: 700,
                socialInsurance: 1900
            },
            {
                id: 15,
                name: "周十七",
                department: "财务部",
                level: "出纳",
                email: "zhoushiqi@company.com",
                baseSalary: 8000,
                attendanceDeduction: 100,
                performanceBonus: 800,
                allowance: 400,
                socialInsurance: 1400
            },
            {
                id: 16,
                name: "吴十八",
                department: "人事部",
                level: "人事总监",
                email: "wushiba@company.com",
                baseSalary: 17000,
                attendanceDeduction: 0,
                performanceBonus: 5000,
                allowance: 1200,
                socialInsurance: 3000
            },
            {
                id: 17,
                name: "郑十九",
                department: "运营部",
                level: "运营专员",
                email: "zhengshijiu@company.com",
                baseSalary: 9000,
                attendanceDeduction: 150,
                performanceBonus: 1200,
                allowance: 500,
                socialInsurance: 1600
            },
            {
                id: 18,
                name: "王二十",
                department: "技术部",
                level: "测试工程师",
                email: "wangershi@company.com",
                baseSalary: 11000,
                attendanceDeduction: 200,
                performanceBonus: 1800,
                allowance: 600,
                socialInsurance: 1900
            },
            {
                id: 19,
                name: "李二一",
                department: "市场部",
                level: "市场总监",
                email: "liery@company.com",
                baseSalary: 16000,
                attendanceDeduction: 0,
                performanceBonus: 5000,
                allowance: 1100,
                socialInsurance: 2800
            },
            {
                id: 20,
                name: "赵二二",
                department: "技术部",
                level: "产品经理",
                email: "zhaoerer@company.com",
                baseSalary: 15000,
                attendanceDeduction: 0,
                performanceBonus: 4000,
                allowance: 1000,
                socialInsurance: 2600
            }
        ];

        // 计算实发工资
        function calculateNetSalary(employee) {
            return employee.baseSalary + employee.performanceBonus + employee.allowance - employee.attendanceDeduction - employee.socialInsurance;
        }

        // 计算应发工资
        function calculateGrossSalary(employee) {
            return employee.baseSalary + employee.performanceBonus + employee.allowance;
        }
        
        // 渲染员工表格
        function renderEmployeeTable(employeeList) {
            const tableBody = document.querySelector('#employee-table tbody');
            tableBody.innerHTML = '';
            
            employeeList.forEach(employee => {
                const grossSalary = calculateGrossSalary(employee);
                const netSalary = calculateNetSalary(employee);
                
                // 创建员工行
                const employeeRow = document.createElement('tr');
                employeeRow.className = 'employee-row';
                employeeRow.dataset.id = employee.id;
                employeeRow.innerHTML = `
                    <td>${employee.name}</td>
                    <td>${employee.department}</td>
                    <td>${employee.level}</td>
                    <td>${employee.baseSalary.toLocaleString()}</td>
                    <td>${employee.performanceBonus.toLocaleString()}</td>
                    <td>${employee.allowance.toLocaleString()}</td>
                    <td>${employee.attendanceDeduction.toLocaleString()}</td>
                    <td>${employee.socialInsurance.toLocaleString()}</td>
                    <td>${grossSalary.toLocaleString()}</td>
                    <td>${netSalary.toLocaleString()}</td>
                    <td>
                        <button class="btn btn-primary send-email-btn" data-id="${employee.id}">发送邮件</button>
                    </td>
                `;
                
                // 创建详情行
                const detailRow = document.createElement('tr');
                detailRow.className = 'detail-row';
                detailRow.dataset.id = employee.id;
                detailRow.innerHTML = `
                    <td colspan="11">
                        <div class="detail-content">
                            <div class="detail-grid">
                                <div class="detail-item">
                                    <label>基本工资</label>
                                    <input type="number" class="base-salary" value="${employee.baseSalary}" disabled>
                                </div>
                                <div class="detail-item">
                                    <label>绩效奖金</label>
                                    <input type="number" class="performance-bonus" value="${employee.performanceBonus}" disabled>
                                </div>
                                <div class="detail-item">
                                    <label>补贴津贴</label>
                                    <input type="number" class="allowance" value="${employee.allowance}" data-id="${employee.id}">
                                </div>
                                <div class="detail-item">
                                    <label>考勤扣款</label>
                                    <input type="number" class="attendance-deduction" value="${employee.attendanceDeduction}" data-id="${employee.id}">
                                </div>
                                <div class="detail-item">
                                    <label>社保公积金</label>
                                    <input type="number" class="social-insurance" value="${employee.socialInsurance}" disabled>
                                </div>
                                <div class="detail-item">
                                    <label>个人所得税</label>
                                    <input type="number" class="tax" value="${Math.round(grossSalary * 0.1)}" disabled>
                                </div>
                                <div class="detail-item">
                                    <label>应发工资</label>
                                    <input type="number" class="gross-salary" value="${grossSalary}" disabled>
                                </div>
                                <div class="detail-item total">
                                    <label>实发工资</label>
                                    <input type="number" class="net-salary" value="${netSalary}" disabled>
                                </div>
                            </div>
                        </div>
                    </td>
                `;
                
                tableBody.appendChild(employeeRow);
                tableBody.appendChild(detailRow);
            });
            
            // 添加点击事件，展开/折叠详情
            document.querySelectorAll('.employee-row').forEach(row => {
                row.addEventListener('click', function(e) {
                    if (e.target.classList.contains('send-email-btn')) {
                        return; // 如果点击的是发送邮件按钮，不展开详情
                    }
                    
                    const id = this.dataset.id;
                    const detailRow = document.querySelector(`.detail-row[data-id="${id}"]`);
                    
                    if (detailRow.style.display === 'table-row') {
                        detailRow.style.display = 'none';
                    } else {
                        // 先隐藏所有详情行
                        document.querySelectorAll('.detail-row').forEach(row => {
                            row.style.display = 'none';
                        });
                        detailRow.style.display = 'table-row';
                    }
                });
            });
            
            // 添加可编辑字段的事件监听
            document.querySelectorAll('.attendance-deduction, .allowance').forEach(input => {
                input.addEventListener('change', function() {
                    const id = this.dataset.id;
                    const employee = employees.find(emp => emp.id == id);
                    
                    if (this.classList.contains('attendance-deduction')) {
                        employee.attendanceDeduction = parseFloat(this.value);
                    } else if (this.classList.contains('allowance')) {
                        employee.allowance = parseFloat(this.value);
                    }
                    
                    // 更新实发工资
                    const netSalary = calculateNetSalary(employee);
                    const detailRow = document.querySelector(`.detail-row[data-id="${id}"]`);
                    detailRow.querySelector('.net-salary').value = netSalary;
                    
                    // 更新表格中的实发工资
                    const employeeRow = document.querySelector(`.employee-row[data-id="${id}"]`);
                    employeeRow.querySelectorAll('td')[4].textContent = netSalary.toLocaleString();
                });
            });
            
            // 添加发送邮件按钮事件
            document.querySelectorAll('.send-email-btn').forEach(button => {
                button.addEventListener('click', function(e) {
                    e.stopPropagation(); // 阻止事件冒泡
                    
                    const id = this.dataset.id;
                    const employee = employees.find(emp => emp.id == id);
                    
                    // 显示确认模态框
                    const modal = document.getElementById('email-modal');
                    const emailSpan = document.getElementById('employee-email');
                    
                    emailSpan.textContent = employee.email;
                    modal.style.display = 'flex';
                    
                    // 存储当前员工ID，用于确认发送
                    modal.dataset.employeeId = id;
                });
            });
        }
        
        // 搜索和筛选功能
        function filterEmployees() {
            const searchTerm = document.getElementById('search-input').value.toLowerCase();
            const departmentFilter = document.getElementById('department-filter').value;
            
            const filteredEmployees = employees.filter(employee => {
                const nameMatch = employee.name.toLowerCase().includes(searchTerm);
                const departmentMatch = !departmentFilter || employee.department === departmentFilter;
                
                return nameMatch && departmentMatch;
            });
            
            renderEmployeeTable(filteredEmployees);
        }
        
        // 初始化页面
        document.addEventListener('DOMContentLoaded', () => {
            // 渲染初始表格
            renderEmployeeTable(employees);
            
            // 添加搜索和筛选事件监听
            document.getElementById('search-input').addEventListener('input', filterEmployees);
            document.getElementById('department-filter').addEventListener('change', filterEmployees);
            
            // 模态框关闭按钮
            document.querySelector('.close-btn').addEventListener('click', () => {
                document.getElementById('email-modal').style.display = 'none';
            });
            
            // 取消发送邮件
            document.getElementById('cancel-email').addEventListener('click', () => {
                document.getElementById('email-modal').style.display = 'none';
            });
            
            // 使用EmailJS发送邮件
            function sendSalaryEmail(employee) {
                const netSalary = calculateNetSalary(employee);
                // 计算应发工资（税前总收入）
                const grossSalary = employee.baseSalary + employee.performanceBonus + employee.allowance;
                // 获取当前日期
                const currentDate = new Date();
                const year = currentDate.getFullYear();
                const month = currentDate.getMonth() + 1;
                
                const emailSubject = `[ABC科技有限公司] ${year}年${month}月工资条 - ${employee.name}`;
                const emailBody = `
                    <h2 style="text-align:center;">员工工资条</h2>
                    <div style="margin-bottom:20px;">
                        <p><strong>公司名称：</strong>ABC科技有限公司</p>
                        <p><strong>发放日期：</strong>${year}年${month}月${currentDate.getDate()}日</p>
                        <p><strong>工资所属期间：</strong>${year}年${month}月</p>
                    </div>
                    
                    <div style="margin-bottom:20px;">
                        <h3>一、员工基本信息</h3>
                        <table border="1" cellpadding="10" cellspacing="0" style="border-collapse: collapse; width:100%;">
                            <tr>
                                <td width="25%"><strong>姓名</strong></td>
                                <td width="25%">${employee.name}</td>
                                <td width="25%"><strong>工号</strong></td>
                                <td width="25%">EMP${employee.id.toString().padStart(4, '0')}</td>
                            </tr>
                            <tr>
                                <td><strong>部门</strong></td>
                                <td>${employee.department}</td>
                                <td><strong>职位</strong></td>
                                <td>${employee.level}</td>
                            </tr>
                        </table>
                    </div>
                    
                    <div style="margin-bottom:20px;">
                        <h3>二、收入明细</h3>
                        <table border="1" cellpadding="10" cellspacing="0" style="border-collapse: collapse; width:100%;">
                            <tr style="background-color:#f2f2f2;">
                                <th>项目</th>
                                <th>金额（元）</th>
                                <th>说明</th>
                            </tr>
                            <tr>
                                <td>基本工资</td>
                                <td>${employee.baseSalary.toLocaleString()}</td>
                                <td>劳动合同约定的基本工资</td>
                            </tr>
                            <tr>
                                <td>绩效奖金</td>
                                <td>${employee.performanceBonus.toLocaleString()}</td>
                                <td>根据月度绩效考核结果</td>
                            </tr>
                            <tr>
                                <td>补贴津贴</td>
                                <td>${employee.allowance.toLocaleString()}</td>
                                <td>包含交通、餐饮、通讯等补贴</td>
                            </tr>
                            <tr>
                                <td>加班工资</td>
                                <td>0</td>
                                <td>本月无加班记录</td>
                            </tr>
                            <tr style="font-weight:bold; background-color:#f2f2f2;">
                                <td>应发工资</td>
                                <td>${grossSalary.toLocaleString()}</td>
                                <td>税前总收入</td>
                            </tr>
                        </table>
                    </div>
                    
                    <div style="margin-bottom:20px;">
                        <h3>三、扣款明细</h3>
                        <table border="1" cellpadding="10" cellspacing="0" style="border-collapse: collapse; width:100%;">
                            <tr style="background-color:#f2f2f2;">
                                <th>项目</th>
                                <th>金额（元）</th>
                                <th>说明</th>
                            </tr>
                            <tr>
                                <td>考勤扣款</td>
                                <td>${employee.attendanceDeduction.toLocaleString()}</td>
                                <td>迟到/早退/缺勤扣款</td>
                            </tr>
                            <tr>
                                <td>社保公积金</td>
                                <td>${employee.socialInsurance.toLocaleString()}</td>
                                <td>个人缴纳部分</td>
                            </tr>
                            <tr>
                                <td>个人所得税</td>
                                <td>0</td>
                                <td>本月免征个税</td>
                            </tr>
                            <tr style="font-weight:bold; background-color:#f2f2f2;">
                                <td>扣款合计</td>
                                <td>${(employee.attendanceDeduction + employee.socialInsurance).toLocaleString()}</td>
                                <td></td>
                            </tr>
                        </table>
                    </div>
                    
                    <div style="margin-bottom:20px;">
                        <h3>四、实发工资</h3>
                        <table border="1" cellpadding="10" cellspacing="0" style="border-collapse: collapse; width:100%;">
                            <tr style="font-weight:bold; background-color:#e6f7ff; font-size:16px;">
                                <td width="25%">实发工资</td>
                                <td width="75%">${netSalary.toLocaleString()} 元</td>
                            </tr>
                        </table>
                    </div>
                    
                    <div style="margin-top:30px; font-size:12px; color:#666;">
                        <p><strong>备注说明：</strong></p>
                        <p>1. 本工资条为法定凭证，请妥善保存</p>
                        <p>2. 如对工资条内容有疑问，请在收到后3个工作日内联系人事部门</p>
                        <p>3. 人事部联系方式：hr@abctech.com 或 电话：010-12345678</p>
                    </div>
                `;
                
                // 准备发送的参数
                const templateParams = {
                    to_name: employee.name,
                    to_email: employee.email,
                    subject: emailSubject,
                    message: emailBody
                };
                
                // 显示发送中提示
                const sendButton = document.getElementById('confirm-email');
                const originalText = sendButton.textContent;
                sendButton.textContent = '发送中...';
                sendButton.disabled = true;
                
                // 发送邮件
                return emailjs.send('service_example', 'template_example', templateParams) // 请将service_example和template_example替换为您在EmailJS控制面板创建的实际ID
                    .then(function(response) {
                        console.log('邮件发送成功:', response);
                        alert(`工资条已成功发送至 ${employee.email}`);
                    })
                    .catch(function(error) {
                        console.error('邮件发送失败:', error);
                        alert(`邮件发送失败: ${error.text}`);
                    })
                    .finally(function() {
                        // 恢复按钮状态
                        sendButton.textContent = originalText;
                        sendButton.disabled = false;
                    });
            }
            
            // 确认发送邮件
            document.getElementById('confirm-email').addEventListener('click', () => {
                const modal = document.getElementById('email-modal');
                const employeeId = modal.dataset.employeeId;
                const employee = employees.find(emp => emp.id == employeeId);
                
                // 使用EmailJS发送邮件
                sendSalaryEmail(employee)
                    .then(() => {
                        // 关闭模态框
                        modal.style.display = 'none';
                    });
            });
        });
    </script>
</body>
</html>